<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>测试我的插件</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
   <div id="plTable">
       <el-button type="primary" @click="exportClick">导出</el-button>
       <el-table
               :data="tableData"
               ref="tables"
               style="width: 100%">
           <el-table-column
                   prop="date"
                   label="日期"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="name"
                   label="姓名"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="address"
                   label="地址">
           </el-table-column>
       </el-table>
   </div>
   <script src="https://unpkg.com/js-xlsx@0.8.22/dist/xlsx.core.min.js"></script>
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <script src="./lib/index.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        console.log(PlExportExcel)
        new Vue({
            el: '#plTable',
            data: function() {
                return {
                    tableData:Array.from({ length: 10 }, (_, idx) => ({
                        idx: idx + 1,
                        date: '2016-05-03',
                        name: '王小虎',
                        ab: '欢迎使用pl-table',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }))
                }
            },
            methods: {
                exportClick () {
                    // 表头
                    const tHeader = ['经销商名称', '下单时间', '订单编号', '客户名称', '订单状态', '付款状态']
                    // 表头在数据中的对应key
                    const filterVal = ['names', 'date', 'orderNumber', 'customerName', 'orderState', 'orderPayState']
                    // 表格数据
                    const list = Array.from({ length: 1000 }, (_, idx) => ({ names: '娃哈哈',
                        date: '201920120',
                        orderNumber: '1521',
                        customerName: '彭垒',
                        orderState: '在线',
                        orderPayState: '全付款'
                    }))
                    // 导出的数据
                    const data = PlExportExcel.formatJson(filterVal, list)
                    // 导出表格
                    PlExportExcel.exportJsonToExcel({
                        header: tHeader,
                        data: data,
                        merges: [{
                            s: {//s为开始
                                c: 0,//开始列
                                r: 0//可以看成开始行,实际是取值范围
                            },
                            e: {//e结束
                                c: 5,//结束列
                                r: 1//结束行
                            }
                        }],
                        multiHeader: [
                            ["工作情况一览表", "", "", "", "", ""],
                            ["", "", "", "", "", ""]
                        ],
                        filename: 'erp订单',
                        bookType: 'xlsx',
                        styleFun: function (ws) {
                            ws["A1"].s = {
                                font: {
                                    name: '宋体',
                                    sz: 18,
                                    color: {rgb: "ff0000"},
                                    bold: true,
                                    italic: false,
                                    underline: false
                                },
                                alignment: {
                                    horizontal: "center",
                                    vertical: "center"
                                },
                                fill: {
                                    fgColor: {rgb: "008000"},
                                },
                            };
                        }
                    })
                },
            }
        })
    </script>
</body>

</html>
